<template>
<!--布局容器-->
  <el-container>
      <el-header>
            <h1>试卷生成</h1>
      </el-header>
      <el-main>
           <!--试卷表单-->
          <el-form :inline="true" class="demo-form-inline" >
                <el-form-item label="试卷名称">
                    <el-input v-model="parameter.paperName" placeholder="请输入试卷名称"></el-input>
                </el-form-item>

                <el-form-item label="试卷总分">
                    <el-input v-model="parameter.paperTotal" placeholder="请输入试卷总分"></el-input>
                </el-form-item>

                <el-form-item label="试卷时长">
                    <el-input v-model="parameter.paperLong" placeholder="请输入试卷时长"></el-input>
                </el-form-item>
          </el-form>
          <h3>请选择题库</h3>
          <!--题库表格-->
          <el-table :data="list" style="width: 100%" :row-key="test" @selection-change="select">
              <el-table-column type="selection" width="100" :reserve-selection="true" ></el-table-column>
              <el-table-column prop="quId" label="编号" width="100"></el-table-column>
              <el-table-column prop="quName" label="题目" width="500"></el-table-column>
              <el-table-column prop="quType" label="题型" width="100"></el-table-column>
          </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="row"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <el-button type="success" @click="createPaper">生成试卷</el-button>
        <!--预览试卷-->
        <el-dialog :visible.sync="isShow" title="预览试卷" widh="50%">
            <div align="center">
              <h1>试卷名称:{{paper.paperName}}</h1>
              <h3>试卷总分:{{paper.paperTotal}}分</h3>
              <h3>试卷时长:{{paper.paperLong}}分</h3>
            </div>

              <h3>一:单选题</h3>
              <template v-for="(x,index) in paper.listQu">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>{{index+1}}: {{x.quName}}</span>
                    </div>
                    <div class="text item">
                        <p>{{x.quA}}</p>
                        <p>{{x.quB}}</p>
                        <p>{{x.quC}}</p>
                        <p>{{x.quD}}</p>
                    </div>
                </el-card>
                <br>
              </template>
        </el-dialog>

      </el-main>


  </el-container>

</template>

<script>
    export default {
        name: "ExamCreate",
        data(){
            return{
               parameter:{//试卷新增参数
                 paperName:"test01",
                 paperTotal:100,
                 paperLong:60,
                 listQuId:[]
               },
               list:[],//题库集合
               page:1,
               row:10,
               total:0,
               totalPage:0,
               isShow:false,//预览试卷对话框是否显示
               paper:{}//试卷对象
            }
        },
       methods:{
            queryQuestion(){  // 题库查询
               const self = this;
                //每次ajax携带 token
               // this.$http.defaults.headers.common['Authorization'] = localStorage.getItem("token");
                this.$http.get("/server-exam-create/question/qu",{params:{"page":this.page,"row":this.row}})
                .then(function (rs) {
                    if(rs.data.code==200){
                      self.list = rs.data.data.list;
                      self.total = rs.data.data.total;
                      self.totalPage = rs.data.data.totalPage;
                    }


                })
            },
         queryPaper(){  // 查询试卷
           const self = this;
           this.$http.get("/server-exam-create/paper/paper",{params:{"paperName":this.parameter.paperName}})
             .then(function (rs) {
               self.paper = rs.data.data;
             })
         },
         handleSizeChange(v){//下拉框触发事件函数
            this.row = v;
            this.queryQuestion();
         },
         handleCurrentChange(page){//点击页吗触发的函数
            this.page = page;
            this.queryQuestion();
         },
         select(v){
              console.log(v)
              //清空数组
             this.parameter.listQuId=[];
              for(var i =0;i<v.length;i++){
                this.parameter.listQuId.push(v[i].quId);
              }
              console.log(this.parameter.listQuId);

         },
         test(row){
              //console.log(row);
              return row.quId;
         },
         createPaper(){
           //显示预览试卷对话框

            const self = this;
          self.isShow = true;
           //预览试卷
           self.queryPaper();
           /*  this.$http.post("/server-exam-create/paper/paper",this.parameter)
           .then(function (rs) {
                console.log(rs.data)
                 self.$alert(rs.data.msg);
                if(rs.data.code==200){
                  //显示预览试卷对话框
                  self.isShow = true;
                  //预览试卷
                  self.queryPaper();
                }
           })*/
         }

       },
      created() {
           this.queryQuestion();
      }

    }
</script>

<style scoped>

</style>
